<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新版vuex写法</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vuex.js"></script>
</head>
<body>
<div id="app"></div>
<script>

    var App = Vue.extend({
        template:`<div><p>this is vuex2.0 demo {{msg}}</p><button @click="add()">+</button> <br/></div>`,
        computed:Vuex.mapGetters({
            msg : 'getMessage'
        }),
        mounted:function(){
            console.log(this.$store)
        },
        methods:{
            add : function(){
                this.$store.dispatch('ADD',2).then(function(resp){
                    console.log(resp)
                })
            }
        }
    })

    var store =  new Vuex.Store({
        state: {
            messages: 0
        },
        mutations:{
            "ADD": function(state, msg) {
                state.messages += msg;
            }
        },
        actions:{
            "ADD" : function(store , param){
                return new Promise(function(resolve, reject) {
                    store.commit('ADD',param)
                    resolve("ok");
                })
            },
        },
        getters:{
            getMessage:function(state){
                return state.messages
            }
        }
    })


    new Vue({
        el: '#app',
        store,
        render: function(h){
             return h(App)
        }
    })



</script>
</body>
</html>